<!DOCTYPE html>
<html lang="en">

<!-- Head tag -->
<head>

    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <!--Description-->
    
        <meta name="description" content="1安全的方式创建控制器
模块对象.controller(&amp;apos;名字&amp;apos;,[&amp;apos;$scope&amp;apos;,&amp;apos;$http&amp;apos;,&amp;apos;$location&amp;apos;,function($scope,$http,$location){

}])
12345678">
    

    <!--Author-->
    
        <meta name="author" content="John Doe">
    

    <!--Open Graph Title-->
    
        <meta property="og:title" content="angular（二）"/>
    

    <!--Open Graph Description-->
    

    <!--Open Graph Site Name-->
    <meta property="og:site_name" content="Hexo"/>

    <!--Type page-->
    
        <meta property="og:type" content="article" />
    

    <!--Page Cover-->
    

        <meta name="twitter:card" content="summary" />
    

    <!-- Title -->
    
    <title>angular（二） - Hexo</title>

    <!-- Bootstrap Core CSS -->
    <link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>

    <!-- Custom CSS -->
    <link rel="stylesheet" href="/css/style.css">

    <!-- Custom Fonts -->
    <link href="//maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css" rel="stylesheet" type="text/css">
    <link href="//fonts.googleapis.com/css?family=Lora:400,700,400italic,700italic" rel="stylesheet" type="text/css">
    <link href="//fonts.googleapis.com/css?family=Open+Sans:300italic,400italic,600italic,700italic,800italic,400,300,600,700,800" rel="stylesheet" type="text/css">

    <!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
    <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
    <!--[if lt IE 9]>
    <script src="//oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
    <script src="//oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
    <![endif]-->

    <!-- Gallery -->
    <link href="//cdnjs.cloudflare.com/ajax/libs/featherlight/1.3.5/featherlight.min.css" type="text/css" rel="stylesheet" />

    <!-- Google Analytics -->
    


    <!-- favicon -->
    
	
</head>


<body>

    <!-- Menu -->
    <!-- Navigation -->
<nav class="navbar navbar-default navbar-custom navbar-fixed-top">
    <div class="container-fluid">
        <!-- Brand and toggle get grouped for better mobile display -->
        <div class="navbar-header page-scroll">
            <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
                <span class="sr-only">Toggle navigation</span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
            </button>
            <a class="navbar-brand" href="/">逐风</a>
        </div>

        <!-- Collect the nav links, forms, and other content for toggling -->
        <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
            <ul class="nav navbar-nav navbar-right">
                
                    <li>
                        <a href="/">
                            
                                Home
                            
                        </a>
                    </li>
                
                    <li>
                        <a href="/archives">
                            
                                Archives
                            
                        </a>
                    </li>
                
                    <li>
                        <a href="/tags">
                            
                                Tags
                            
                        </a>
                    </li>
                
                    <li>
                        <a href="/categories">
                            
                                Categories
                            
                        </a>
                    </li>
                
                    <li>
                        <a href="https://github.com/klugjo/hexo-theme-clean-blog">
                            
                                <i class="fa fa-github fa-stack-2x"></i>
                            
                        </a>
                    </li>
                
            </ul>
        </div>
        <!-- /.navbar-collapse -->
    </div>
    <!-- /.container -->
</nav>

    <!-- Main Content -->
    <!-- Page Header -->
<!-- Set your background image for this header in your post front-matter: cover -->

<header class="intro-header" style="background-image: url('http://www.codeblocq.com/assets/projects/hexo-theme-clean-blog/img/home-bg.jpg')">
    <div class="container">
        <div class="row">
            <div class="col-lg-8 col-lg-offset-2 col-md-10 col-md-offset-1">
                <div class="post-heading">
                    <h1>angular（二）</h1>
                    
                    <span class="meta">
                        <!-- Date and Author -->
                        
                        
                            2017-05-06
                        
                    </span>
                </div>
            </div>
        </div>
    </div>
</header>

<!-- Post Content -->
<article>
    <div class="container">
        <div class="row">

            <!-- Tags and categories -->
           

            <!-- Gallery -->
            

            <!-- Post Main Content -->
            <div class="col-lg-8 col-lg-offset-2 col-md-10 col-md-offset-1">
                <figure class="highlight plain"><table><tr><td class="gutter"><pre><div class="line">1</div></pre></td><td class="code"><pre><div class="line">安全的方式创建控制器</div></pre></td></tr></table></figure>
<pre><code>模块对象.controller(&apos;名字&apos;,[&apos;$scope&apos;,&apos;$http&apos;,&apos;$location&apos;,function($scope,$http,$location){

}])
</code></pre><figure class="highlight plain"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div><div class="line">4</div><div class="line">5</div><div class="line">6</div><div class="line">7</div><div class="line">8</div><div class="line">9</div><div class="line">10</div></pre></td><td class="code"><pre><div class="line">循环  有重复值时报错，解决方法，加上 track by 一个不重复的值($index)</div><div class="line">ng-repeat=&quot;item in arr&quot;</div><div class="line">ng-repeat=&quot;item in arr track by $index&quot; </div><div class="line"></div><div class="line">$index当前循环的索引</div><div class="line">$first当前循环是否是第一次循环  布尔值</div><div class="line">$last当前循环是否是最后一次循环</div><div class="line">$middle当前循环是否是中间项(除了两头的)</div><div class="line">$even当前循环是否是偶数项</div><div class="line">$odd当前循环是否是奇数项</div></pre></td></tr></table></figure>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div><div class="line">4</div><div class="line">5</div><div class="line">6</div><div class="line">7</div><div class="line">8</div><div class="line">9</div><div class="line">10</div><div class="line">11</div><div class="line">12</div><div class="line">13</div><div class="line">14</div><div class="line">15</div><div class="line">16</div><div class="line">17</div><div class="line">18</div><div class="line">19</div><div class="line">20</div><div class="line">21</div><div class="line">22</div><div class="line">23</div><div class="line">24</div><div class="line">25</div><div class="line">26</div><div class="line">27</div><div class="line">28</div><div class="line">29</div><div class="line">30</div><div class="line">31</div><div class="line">32</div><div class="line">33</div><div class="line">34</div><div class="line">35</div><div class="line">36</div><div class="line">37</div><div class="line">38</div><div class="line">39</div><div class="line">40</div><div class="line">41</div><div class="line">42</div><div class="line">43</div><div class="line">44</div><div class="line">45</div><div class="line">46</div><div class="line">47</div><div class="line">48</div><div class="line">49</div><div class="line">50</div><div class="line">51</div><div class="line">52</div><div class="line">53</div><div class="line">54</div><div class="line">55</div></pre></td><td class="code"><pre><div class="line">循环 demo</div><div class="line">&lt;body ng-app=&quot;myApp&quot; ng-controller=&quot;demoCtrl&quot;&gt;</div><div class="line"></div><div class="line">	&lt;!--</div><div class="line">		ng-repeat=&quot;循环过程中的当前项 in 数据&quot; 循环数据并且生成DOM元素</div><div class="line">	--&gt;</div><div class="line"></div><div class="line">	&lt;ul&gt;</div><div class="line">		&lt;li ng-repeat=&quot;item in arr&quot;&gt;&#123;&#123;item&#125;&#125;&lt;/li&gt;</div><div class="line">	&lt;/ul&gt;</div><div class="line"></div><div class="line">	&lt;div ng-repeat=&quot;person in persons&quot;&gt;</div><div class="line">		&#123;&#123; person.name &#125;&#125; &#123;&#123; person.age &#125;&#125;</div><div class="line">		&lt;span ng-repeat=&quot;item in person.hobby&quot;&gt;&#123;&#123;item&#125;&#125;&lt;/span&gt;</div><div class="line">	&lt;/div&gt;</div><div class="line"></div><div class="line">	&lt;div&gt;&#123;&#123;obj.a&#125;&#125; &#123;&#123;obj.b&#125;&#125;&lt;/div&gt;</div><div class="line"></div><div class="line">	&lt;div ng-repeat=&quot;item in obj&quot;&gt;&#123;&#123;item&#125;&#125;&lt;/div&gt;</div><div class="line"></div><div class="line">	&lt;div ng-repeat=&quot;(key,val) in obj&quot;&gt;&#123;&#123;key&#125;&#125; =&gt; &#123;&#123;val&#125;&#125;&lt;/div&gt;</div><div class="line"></div><div class="line">	&lt;script src=&quot;node_modules/angular/angular.js&quot;&gt;&lt;/script&gt;</div><div class="line">	&lt;script&gt;</div><div class="line">		angular.module(&apos;myApp&apos;,[])</div><div class="line"></div><div class="line">			.controller(&apos;demoCtrl&apos;,[&apos;$scope&apos;,function($scope)&#123;</div><div class="line"></div><div class="line">				$scope.arr = [&apos;a&apos;,&apos;b&apos;,&apos;c&apos;];</div><div class="line"></div><div class="line">				$scope.persons = [</div><div class="line">					&#123;</div><div class="line">						name:&apos;zhangsan&apos;,</div><div class="line">						age:20,</div><div class="line">						hobby:[&apos;敲代码&apos;,&apos;吃&apos;,&apos;睡&apos;]</div><div class="line">					&#125;,</div><div class="line">					&#123;</div><div class="line">						name:&apos;lisi&apos;,</div><div class="line">						age:30,</div><div class="line">						hobby:[&apos;篮球&apos;,&apos;足球&apos;]</div><div class="line">					&#125;</div><div class="line">				]</div><div class="line"></div><div class="line">				$scope.obj = &#123;</div><div class="line">					a:1,</div><div class="line">					b:2</div><div class="line">				&#125;</div><div class="line"></div><div class="line">			&#125;])</div><div class="line"></div><div class="line">		/*for(var i=0;i&lt;arr.length;i++)&#123;</div><div class="line">			arr[i]</div><div class="line">		&#125;*/</div><div class="line">	&lt;/script&gt;</div><div class="line">&lt;/body&gt;</div></pre></td></tr></table></figure>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div><div class="line">4</div><div class="line">5</div><div class="line">6</div><div class="line">7</div><div class="line">8</div><div class="line">9</div><div class="line">10</div></pre></td><td class="code"><pre><div class="line"></div><div class="line">&#123;&#123;&#125;&#125;问题  刷新时有&#123;&#123;&#125;&#125;  ng-bind=&quot;数据&quot;  ng-bind-template=&quot;&#123;&#123;数据1&#125;&#125;&#123;&#123;数据2&#125;&#125;&quot;</div><div class="line"></div><div class="line">ng-non-bindable 里面的指令不执行，写啥是啥</div><div class="line"></div><div class="line">ng-show=&quot;true/false /变量名&quot; 显示  通过控制属性</div><div class="line">ng-hide=&quot;true/false /变量名&quot; 隐藏</div><div class="line">ng-if=&quot;true/false&quot; 显示隐藏   通过添加删除节点</div><div class="line">    ng-class指令：操作类名  ng-class=&quot;&#123;&apos;green&apos;:isGreen,&apos;red&apos;:!isGreen&#125;&quot;</div><div class="line">ng-switch   ng-switch-when</div></pre></td></tr></table></figure>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div><div class="line">4</div><div class="line">5</div><div class="line">6</div><div class="line">7</div><div class="line">8</div><div class="line">9</div><div class="line">10</div><div class="line">11</div><div class="line">12</div><div class="line">13</div><div class="line">14</div><div class="line">15</div><div class="line">16</div><div class="line">17</div><div class="line">18</div><div class="line">19</div></pre></td><td class="code"><pre><div class="line">点击切换</div><div class="line">&lt;div ng-switch=&quot;num&quot;&gt;</div><div class="line">		&lt;button ng-click=&quot;num=1&quot;&gt;按钮1&lt;/button&gt;</div><div class="line">		&lt;button ng-click=&quot;num=2&quot;&gt;按钮2&lt;/button&gt;</div><div class="line">		&lt;button ng-click=&quot;num=3&quot;&gt;按钮3&lt;/button&gt;</div><div class="line">		&lt;div ng-switch-when=&quot;1&quot;&gt;按钮1对应的内容&lt;/div&gt;</div><div class="line">		&lt;div ng-switch-when=&quot;2&quot;&gt;按钮2对应的内容&lt;/div&gt;</div><div class="line">		&lt;div ng-switch-when=&quot;3&quot;&gt;按钮3对应的内容&lt;/div&gt;</div><div class="line">	&lt;/div&gt;</div><div class="line"></div><div class="line">	&lt;script src=&quot;node_modules/angular/angular.js&quot;&gt;&lt;/script&gt;</div><div class="line">	&lt;script&gt;</div><div class="line">		angular.module(&apos;myApp&apos;,[])</div><div class="line"></div><div class="line">			.controller(&apos;demoCtrl&apos;,[&apos;$scope&apos;,function($scope)&#123;</div><div class="line"></div><div class="line">				$scope.num = 1;</div><div class="line"></div><div class="line">			&#125;])</div></pre></td></tr></table></figure>
<p>ng-src 数据解析完成时触发，防止404报错<br>ng-href 数据解析完成时触发，防止404报错<br><figure class="highlight plain"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div><div class="line">4</div><div class="line">5</div><div class="line">6</div><div class="line">7</div><div class="line">8</div><div class="line">9</div><div class="line">10</div><div class="line">11</div><div class="line">12</div><div class="line">13</div><div class="line">14</div><div class="line">15</div><div class="line">16</div><div class="line">17</div><div class="line">18</div><div class="line">19</div><div class="line">20</div><div class="line">21</div><div class="line">22</div><div class="line">23</div><div class="line">24</div><div class="line">25</div><div class="line">26</div><div class="line">27</div><div class="line">28</div><div class="line">29</div><div class="line">30</div><div class="line">31</div><div class="line">32</div><div class="line">33</div><div class="line">34</div><div class="line">35</div><div class="line">36</div><div class="line">37</div><div class="line">38</div><div class="line">39</div><div class="line">40</div><div class="line">41</div><div class="line">42</div><div class="line">43</div><div class="line">44</div><div class="line">45</div><div class="line">46</div><div class="line">47</div><div class="line">48</div><div class="line">49</div><div class="line">50</div><div class="line">51</div></pre></td><td class="code"><pre><div class="line">带参数路由传递</div><div class="line">路由传递参数分为三步</div><div class="line">	1.在被传递参数页面(article)的路由中配置参数占位符(类似于函数的形参)</div><div class="line">	2.在传递参数页面(list)的跳转链接中将实际的参数传递过去</div><div class="line">    3.在被传递参数页面(article)的控制器中获取传递过来的参数</div><div class="line">&lt;body ng-app=&quot;myapp&quot;&gt;</div><div class="line">&lt;a href=&quot;#!/index&quot;&gt;首页&lt;/a&gt;</div><div class="line">&lt;a href=&quot;#!/list&quot;&gt;列表页&lt;/a&gt;</div><div class="line"></div><div class="line">&lt;div ng-view&gt;&lt;/div&gt;</div><div class="line">&lt;script src=&quot;node_modules/angular/angular.min.js&quot;&gt;&lt;/script&gt;</div><div class="line">&lt;script src=&quot;node_modules/angular-route/angular-route.min.js&quot;&gt;&lt;/script&gt;</div><div class="line">&lt;script&gt;</div><div class="line">  var app = angular.module(&apos;myapp&apos;, [&apos;ngRoute&apos;]);</div><div class="line">  app.config(function ($routeProvider) &#123;</div><div class="line">    $routeProvider</div><div class="line">        .when(&apos;/index&apos;, &#123;</div><div class="line">          templateUrl: &apos;./tpl/index.html&apos;</div><div class="line">        &#125;)</div><div class="line">        .when(&apos;/list&apos;, &#123;</div><div class="line">          templateUrl: &apos;listTpl&apos;,</div><div class="line">          controller: &apos;ctrlList&apos;</div><div class="line">        &#125;)</div><div class="line">        .when(&apos;/article/:id&apos;, &#123;</div><div class="line">          templateUrl: &apos;articleTpl&apos;,</div><div class="line">          controller: &apos;articleCtrl&apos;</div><div class="line">        &#125;)</div><div class="line">        .otherwise(&apos;/index&apos;)</div><div class="line">  &#125;);</div><div class="line">  app.controller(&apos;articleCtrl&apos;, function ($routeParams, $scope) &#123;</div><div class="line">    $scope.msg = $routeParams.id</div><div class="line">    console.log($routeParams)</div><div class="line">  &#125;);</div><div class="line">  app.controller(&apos;ctrlList&apos;, function ($scope) &#123;</div><div class="line">    $scope.link1 = &quot;#!/article/1&quot;;</div><div class="line">    $scope.link2 = &quot;#!/article/2&quot;;</div><div class="line">    $scope.link3 = &quot;#!/article/3&quot;;</div><div class="line">  &#125;);</div><div class="line">&lt;/script&gt;</div><div class="line">&lt;script type=&quot;text/ng-template&quot; id=&quot;listTpl&quot;&gt;</div><div class="line">  &lt;ul&gt;</div><div class="line">  //防止报错，(报错不影响功能)</div><div class="line">    &lt;li&gt;&lt;a href=&quot;&#123;&#123;link1&#125;&#125;&quot;&gt;一&lt;/a&gt;&lt;/li&gt;</div><div class="line">    &lt;li&gt;&lt;a href=&quot;&#123;&#123;link2&#125;&#125;&quot;&gt;二&lt;/a&gt;&lt;/li&gt;</div><div class="line">    &lt;li&gt;&lt;a href=&quot;&#123;&#123;link3&#125;&#125;&quot;&gt;三&lt;/a&gt;&lt;/li&gt;</div><div class="line">  &lt;/ul&gt;</div><div class="line">&lt;/script&gt;</div><div class="line">&lt;script type=&quot;text/ng-template&quot; id=&quot;articleTpl&quot;&gt;</div><div class="line">  &#123;&#123; msg &#125;&#125;</div><div class="line">&lt;/script&gt;</div><div class="line">&lt;/body&gt;</div></pre></td></tr></table></figure></p>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div></pre></td><td class="code"><pre><div class="line">- $scope.$watch</div><div class="line">- $scope.$apply</div><div class="line"> 当通过原生JS将angularjs中的数据做了改变以后,angularjs不知道,所以需要调用$scope.$apply()方法通知angularjs 更新html页面</div></pre></td></tr></table></figure>
<body ng-app="myApp" ng-controller="demoCtrl">

<p><input type="text" ng-model="val"> </p>
<p><script src="node_modules/angular/angular.js"></script></p>
<p><script><br>  angular.module(‘myApp’, [])</p>
<pre><code>.controller(&apos;demoCtrl&apos;, [&apos;$scope&apos;, function ($scope) {

  $scope.val = &quot;初始值&quot;;

  // 监控数据的变化
  // 1.要监控的数据
  // 2.只要数据发生变化 就会执行回调函数
  // newValue 用户输入的最新的值
  // oldValue 上一次用户输入的内容
  // 页面一上来的时候 回调函数首先会执行一次
  $scope.$watch(&apos;val&apos;, function (newValue, oldValue) {

    if (newValue.length &gt; 10) {

      $scope.tips = &quot;大于10&quot;;

    } else {

      $scope.tips = &quot;小于10&quot;;

    }

  });

}])
</code></pre><p></script><br></p></body><br>```<p></p>


                
            </div>

            <!-- Comments -->
            
                <div class="col-lg-8 col-lg-offset-2 col-md-10 col-md-offset-1">
                    


                </div>
            
        </div>
    </div>
</article>

    <!-- Footer -->
    <hr />

<!-- Footer -->
<footer>
    <div class="container">
        <div class="row">
            <div class="col-lg-8 col-lg-offset-2 col-md-10 col-md-offset-1">
                <ul class="list-inline text-center">
                    

                    

                    
                        <li>
                            <a href="https://github.com/klugjo/hexo-theme-clean-blog" target="_blank">
                                <span class="fa-stack fa-lg">
                                    <i class="fa fa-circle fa-stack-2x"></i>
                                    <i class="fa fa-github fa-stack-1x fa-inverse"></i>
                                </span>
                            </a>
                        </li>
                    

                    

                    

                    
                </ul>
                <p class="copyright text-muted">&copy; 2018 John Doe<br></p>
                <p class="copyright text-muted">Original Theme <a target="_blank" href="http://startbootstrap.com/template-overviews/clean-blog/">Clean Blog</a> from <a href="http://startbootstrap.com/" target="_blank">Start Bootstrap</a></p>
                <p class="copyright text-muted">Adapted for <a target="_blank" href="https://hexo.io/">Hexo</a> by <a href="http://www.codeblocq.com/" target="_blank">Jonathan Klughertz</a></p>
            </div>
        </div>
    </div>
</footer>


    <!-- After footer scripts -->
    
<!-- jQuery -->
<script src="//code.jquery.com/jquery-2.1.4.min.js"></script>

<!-- Bootstrap -->
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>

<!-- Gallery -->
<script src="//cdnjs.cloudflare.com/ajax/libs/featherlight/1.3.5/featherlight.min.js" type="text/javascript" charset="utf-8"></script>

<!-- Disqus Comments -->



</body>

</html>